<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>增加用户</title>
	</head>
	<body>
		<div id="app">
			<table>
				<tbody>
					<tr>
						<th style="width: 70px;">
							<label>姓名*</label>
						</th>
						<td style="width: 200px;">
							<input type="text" v-model="ownerName" />
						</td>
						<td>
							<span v-if="isShowErrorName" style="color: red;">请输入至少1个且小于3个字符</span>
							<span v-else ></span>
						</td>
					</tr>
					<tr>
						<th style="width: 70px;">
							<label>性别*</label>
						</th>
						<td style="width: 200px;">
							<select style="width:50px; height:22px" id="og">
							            <option value="1">男</option>
							            <option value="2">女</option>					            					
							</select>
						</td>
					</tr>				
					<tr>
						<th style="width: 70px;">
							<label>籍贯*</label>
						</th>
						<td style="width: 200px;">
							<input type="text" v-model="ownerHometown" />
						</td>
						<td>
							<span v-if="isShowErrorHometown" style="color: red;">请输入至少1个且小于10个字符</span>
							<span v-else ></span>
						</td>
					</tr>
					<tr>
						<th style="width: 70px;">
							<label>手机号*</label>
						</th>
						<td style="width: 200px;">
							<input type="text" v-model="ownerPhone" />
						</td>
						<td>
							<span v-if="isShowErrorPhone" style="color: red;">请输入11位字符</span>
							<span v-else ></span>
						</td>
					</tr>
					
					
					<tr>
						<td></td>
						<td>
							<button @click="add()">增加</button>
							<a href="OwnerQuery.html">
								<button>返回</button>
							</a>
						</td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td>
							<span v-if="isGlobaErrorShow" style="color: red;">增加失败</span>
							<span v-else ></span>
							<span v-if="isSuccessShow" style="color: green;">增加成功</span>
							<span v-else ></span>
						</td>
						
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="js/vue.js"></script>
		<script src="js/axios.js"></script>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					ownerName: "",
					ownerHometown: "",
					ownerPhone: "",
					isShowErrorName: false,
					isShowErrorHometown: false,
					isShowErrorPhone:false,	
									
					isGlobaErrorShow: false,
					isSuccessShow: false,
				},
				methods:{
					add: function() {
						this.isShowErrorName=false,
						this.isShowErrorHometown=false,
						this.isShowErrorPhone=false,											
						this.isGlobaErrorShow=false,
						this.isSuccessShow=false
						
						if(this.ownerName == '' || this.ownerName ==null || this.ownerName.length > 3 || this.ownerHometown == '' || this.ownerHometown ==null || this.ownerName.length > 10 || this.ownerPhone == '' || this.ownerPhone ==null || this.ownerPhone.length <= 10 || this.ownerPhone.length >= 12) {
							
							this.isGlobaErrorShow = true;
							if(this.ownerName == '' || this.ownerName ==null) {
								this.isShowErrorName = true;
							} else if(this.ownerName.length > 3) {
								this.isShowErrorName = true;
							}
							
							if(this.ownerHometown == '' || this.ownerHometown ==null) {
								this.isShowErrorHometown = true;
							} else if (this.ownerHometown.length > 10){
								this.isShowErrorHometown = true;
							}
							
							if(this.ownerPhone == '' || this.ownerPhone ==null) {
								this.isShowErrorPhone = true;
							} else if(this.ownerPhone.length <= 10 || this.ownerPhone.length >= 12) {
								this.isShowErrorPhone = true;
							}
							return;
						} 
						
												
						axios({
							headers: {'content-type': 'application/x-www-form-urlencoded'},
							method: "post",
							url: "http://localhost:8888/simpleweb/owner/add",
							data : "owner_name=" + this.ownerName + "&" +
									"owner_gender=" + document.getElementById('og').options[document.getElementById('og').selectedIndex].value + "&" +
									"owner_hometown=" + this.ownerHometown + "&" +
									"owner_phone=" + this.ownerPhone,
														
						}).then((res) => {
							console.log(res.data);
							if(res.data.res) {
								this.isSuccessShow = true;
							} else {
								
							}
						}).catch((error )=> {
							console.log(error);
						});
					}
				}
			});
		</script>
	</body>
</html>